<template>
<view class="container">
  <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  <view class="form-panel">
    <view class="title">发票详情</view>
    <view class="invoice-form">
      <view class="invoice-form-item" >
        <view class="invoice-form-label">抬头类型</view>
        <view class="invoice-form-val">
          <radio-group @change="changeTitleType">
            <label><radio :value="0" color="#006241" :checked="currentTitleType === 0" style="transform: scale(0.7)"></radio>企业单位</label>
            <label><radio :value="1" color="#006241" :checked="currentTitleType === 1" style="transform: scale(0.7)"></radio>个人/非企业单位</label>
          </radio-group>
        </view>
      </view>
      <view class="invoice-form-item">
        <view class="invoice-form-label">发票类型</view>
        <view class="invoice-form-val">
          <radio-group @change="changeInvoiceType">
            <label><radio :value="0" color="#006241" :checked="invoiceType === 0" style="transform: scale(0.7)"></radio>增值税专用发票</label>
            <label><radio :value="1" color="#006241" :checked="invoiceType === 1" style="transform: scale(0.7)"></radio>普通发票</label>
          </radio-group>
        </view>
      </view>
      <view class="invoice-form-item">
        <view class="invoice-form-label">购方名称</view>
        <view class="invoice-form-val val-text" @click="choseInfo" v-if="currentTitleType === 0">
          <text>{{currentTitle.buyerName || '请选择'}}</text>
          <uni-icons class="icon" type="list" color="#1b1b1b" size="18" />
        </view>
        <view class="invoice-form-val val-text" v-else>
          <uni-easyinput v-model="currentTitle.buyerName" :inputBorder="false" placeholder="请输入购方名称" placeholderStyle="text-align:right" ></uni-easyinput>
        </view>
      </view>
      <view class="invoice-form-item" v-if="currentTitleType === 0">
        <view class="invoice-form-label">购方税号</view>
        <view class="invoice-form-val val-text" @click="choseInfo">
          <text>{{currentTitle.buyerTaxpayerNum || '请选择'}}</text>
        </view>
      </view>
      <view class="invoice-form-item">
        <view class="invoice-form-label">更多内容</view>
        <view class="invoice-form-val val-text" @click="onMoreInfo">
          <text>填写备注、地址等(非必填)</text>
          <uni-icons class="icon" type="forward" color="#1b1b1b" size="18" />
        </view>
      </view>
      <view class="invoice-form-item" style="margin-top: 20rpx;">
        <view class="invoice-form-label">总金额</view>
        <view class="invoice-form-val val-text total-price">
          <view class="price"><text>{{orderAmount}}</text>元</view>
          <view>
            <text>共{{orders.length}}张</text>
<!--            <uni-icons class="icon" type="forward" color="#1b1b1b" size="18" />-->
          </view>
        </view>
      </view>
      <view class="title">接收方式</view>
      <view class="invoice-form-item">
        <view class="invoice-form-label">电子邮箱</view>
        <view class="invoice-form-val val-text">
          <uni-easyinput v-model="formData.takerEmail" :inputBorder="false" placeholder="请输入邮箱" placeholderStyle="text-align:right" ></uni-easyinput>
        </view>
      </view>
    </view>
  </view>
  <view class="confirm-btn" @click="onConfirm">提交</view>

  <!-- 发票抬头 -->
  <view>
    <uni-popup ref="popup" type="bottom" borderRadius="24rpx 24rpx 0rpx 0rpx" background-color="#fff" :is-mask-click="false">
      <view class="popup-content">
        <view class="title flex-between">
          <text>我的发票抬头</text>
          <uni-icons type="closeempty" size="24" @click="onClose"></uni-icons>
        </view>
        <view class="emptyPanel" v-if="dataList.length === 0">
          <view><image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/empty.png" /></view>
          <view class="emptyText">暂未添加发票抬头</view>
          <view class="setBtn" @click="addTitle()">立即设置</view>
        </view>
        <view class="panel" v-else>
          <uni-swipe-action>
            <uni-swipe-action-item v-for="item in dataList" :key="item.id" :right-options="slideOptions" @click="onClickDelete(item)" @change="change">
              <view class="info-item" @click="onClickTitle(item)">
                <view class="name">{{item.buyerName}}</view>
                <view class="type">{{item.opInvoiceType === 1 ? '单位' : '个人'}}</view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
          <view class="add-btn" @click="addTitle()">添加常用发票抬头</view>
        </view>
      </view>
    </uni-popup>
  </view>
</view>
</template>

<script>

import mvBar from "@/components/mysNavBar.vue";
import {applyInvoice, deleteInvoiceTitle, getInvoiceTitle} from "@/api";
export default {
  name: "index",
  components: {mvBar},
  data(){
    return{
      isEmpty: false,
      dataList: [],
      orders: [],
      orderAmount: 0,
      currentTitle: {
        buyerName: '',
        buyerTaxpayerNum: '',
      },
      currentTitleType: 0,
      invoiceType: 1,
      mysNavConfig: {
        navPadding: true,
        isHome: false,
        navFixed: true,
        navTitle: {
          text: "开具发票",
          color: "#1B1B1B",
          fontSize: "34upx", // px upx rpx
          fontWeight: "500", // blod
        },
        leftIconPath: '/static/header/back-b.png'
      },
      formData:{
        takerEmail: '',
      },
      slideOptions: [{
        text: '删除',
        style: {
          backgroundColor: '#dd524d'
        }
      }],
      orderType: 1, // 1加油 2充电
      moreInfo: '',
    }
  },
  onLoad(option) {
    const params = option.orders
    this.orderAmount = option.orderAmount
    this.orderType = option.orderType
    this.orders = params.split(',')
    this.getTitleList();
    uni.$on('invoiceMoreInfo', this.getMoreInfo)
  },
  methods:{
    async getTitleList() {
      const params = {
        pageNum: 1,
        pageSize: 999
      }
      const res = await getInvoiceTitle({...params})
      if ( res.code === 200 )
        this.dataList = res.rows
    },
    getMoreInfo(e){
      this.moreInfo = e.msg
    },
    choseInfo(){
      this.$refs.popup.open()
    },
    onClose(){
      this.$refs.popup.close()
    },
    async onClickDelete(data) {
      const params = { id : data.id }
      await deleteInvoiceTitle({...params})
      await this.getTitleList()
    },
    onClickTitle(data){
      this.currentTitle = data
      this.onClose()
      console.log(this.currentTitle)
    },
    addTitle(){
      uni.navigateTo({
        url: '/pages/personal-center/invoice/invoice-title'
      })
    },
    changeTitleType(evt){
      this.currentTitleType = evt.detail.value *1
    },
    changeInvoiceType(evt){
      this.invoiceType = evt.detail.value *1
    },
    onMoreInfo(){
      uni.setStorageSync('moreInfo', this.moreInfo)
      uni.navigateTo({
        url: '/pages/personal-center/invoice/more-info'
      })
    },
    async onConfirm() {
      console.log(this.currentTitle)
      if (!this.currentTitle.buyerName){
        uni.showToast({
          title:'请完善发票抬头',
          icon: 'error'
        })
        return false
      }
      if (!this.formData.takerEmail){
        uni.showToast({
          title:'请输入电子邮箱',
          icon: 'error'
        })
        return false
      }
      const params = {
        "applyType": 1,
        "buyerName": this.currentTitle.buyerName,
        "buyerTaxpayerNum": this.currentTitle.buyerTaxpayerNum,
        "invoiceIssueKindCode": this.invoiceType === 0 ? '81' : '82',
        "opInvoiceType": this.currentTitleType + 1,
        "orderIds": this.orders,
        "orderType": this.orderType,
        "takerEmail": this.formData.takerEmail,
        ...this.moreInfo
      }
      const res = await applyInvoice({...params})
      if (res.code === 200){
        uni.navigateTo({
          url: '/pages/personal-center/invoice/success'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  background: #F7F7F7;
  padding-bottom: 160upx;
  ::v-deep{
    .uni-easyinput__placeholder-class{
      font-size: 28upx;
    }
  }
  .flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .popup-content{
    border-radius: 24upx 24upx 0 0 ;
    height: 840upx;
    overflow-y: scroll;
    position: relative;
    //padding-top: 106upx;
    .title{
      position: sticky;
      top: 0;
      left: 0;
      padding: 32upx;
      width: 100%;
      z-index: 1;
      box-sizing: border-box;
      background: #FFFFFF;
      text{
        font-size: 28upx;
        color: #1B1B1B;
        font-weight: 500;
      }
    }
    .emptyPanel{
      text-align: center;
      padding-top: 160upx;
      image{
        width: 200upx;
        height: 200upx;
        margin-bottom: 16upx;
      }
      .emptyText{
        color: #9D9D9D;
        font-size: 28upx;
      }
      .setBtn{
        margin: 16upx auto;
        width: 140upx;
        font-size: 24upx;
        padding: 14upx 24upx;
        border-radius: 8upx;
        border: 1px solid #006241;
        color: #006241;
      }
    }
    .panel{
      padding-bottom: 140upx;
      position: relative;
      .info-item{
        padding: 24upx 32upx;
        box-shadow: 0px -0.5px 0px 0px #0000001A inset;
        .name{
          font-size: 32upx;
          color: #1B1B1B;
        }
        .type{
          margin-top: 8upx;
          font-size: 24upx;
          color: #9D9D9D;
        }
      }
      .add-btn{
        position: absolute;
        left: 50%;
        bottom: 16upx;
        width: 700upx;
        line-height: 80upx;
        background: #006241;
        border-radius: 60upx;
        color: #FFFFFF;
        text-align: center;
        transform: translateX(-50%);
      }
    }
  }
  .confirm-btn{
    position: fixed;
    left: 50%;
    bottom: 80upx;
    width: 700upx;
    line-height: 80upx;
    background: #006241;
    border-radius: 60upx;
    color: #FFFFFF;
    text-align: center;
    transform: translateX(-50%);
  }
  .form-panel{
    .title{
      padding: 24upx;
      font-size: 28upx;
      color: #9D9D9D;
    }
    .invoice-form{
      .invoice-form-item {
        box-sizing: border-box;
        padding: 32upx 24upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #FFFFFF;
        box-shadow: 0px -0.5px 0px 0px #0000001A inset;
        font-size: 32upx;
        font-weight: 400;
        .invoice-form-label{
          min-width: 200upx;
          color: #1B1B1B;
        }
        .invoice-form-val{
          width: 100%;
          font-size: 28upx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          label{
            margin-left: 16upx;
          }
          .icon{
            margin-left: 12upx;
          }
        }
        .val-text{
          font-size: 32upx;
          text-overflow: ellipsis;
          //color: #9D9D9D;
        }
        .total-price{
          width: 100%;
          justify-content: space-between;
          .price{
            color: #1B1B1B;
            text{
              margin-right: 12upx;
              color: #F57546;
            }
          }
        }
      }
    }
  }
}
</style>